<!-- 需求录入表单设置 -->
<template>
  <div class="index">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <div class="operater">
        <a-button type="primary" class="btn" @click="goPurchaseReceiptCreate()"
          >新建模板</a-button
        >
        <a-input-search
          search-button
          class="input"
          v-model="NameVal"
          :style="{ width: '320px' }"
          placeholder="单据名称"
          @search="search"
        />
      </div>
      <div class="model-title">录入模板</div>
      <div class="cards">
        <a-empty v-if="mokeList.length === 0" />

        <DemandCard
          ref="demandCardRef"
          v-for="item in mokeList"
          :key="item.id"
          :form="item"
          @del="del"
          @statusChange="statusChange"
          @goDemandCreate="goPurchaseReceiptCreate"
        >
        </DemandCard>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    getDemandTemplateList,
    postDemandTemplateStatus,
    deleteDemandTemplate,
  } from '@/api/order-management/client-management/demand/demand';
  import dayjs from 'dayjs';

  const router = useRouter();
  const demandCardRef = ref();
  const title: string = '录入模板';
  const breadCrumb: string[] = ['库存管理', '基础设置', '采购收货模板'];
  interface mokeType {
    id: number;
    type: number; // 1需求2订单
    name: string;
    status: number;
    design: { name: string };
    explain: string; // 单据说明
    icon: string;
    orderDesignId: number;
    createdAt: string;
    createUserId: number; // 暂时没哟此字段
    createUserName: string; // 暂时没哟此字段
  }
  const mokeList = ref<mokeType[]>([]);
  const NameVal = ref();
  const goPurchaseReceiptCreate = (params = {}) => {
    router.push({
      name: 'ReceiptFormCreate',
      query: params,
    });
  };
  // 获取所有需求模板
  const getDemandTemplateAll = async () => {
    try {
      let msg: any = {};
      if (NameVal.value) msg.tempName = NameVal.value;
      const res = await getDemandTemplateList({ ...msg, type: 3 });
      mokeList.value = res;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  // 当某个模板开启，遍历所有状态改成关闭
  const change = (id: number, status: number) => {
    if (status === 1) {
      // 如果是开启
      mokeList.value = mokeList.value.map((item) => {
        item.status = item.id === id ? 1 : 2;
        return item;
      });
    } else {
      // 如果是关闭
      mokeList.value.forEach((item) => {
        if (item.id === id) {
          item.status = 2;
        }
        // return item
      });
    }
  };
  // 修改启用状态
  type updateParams = {
    id: number;
    status: number;
  };
  //多个需求模板状态，只能有一个是开启状态
  const statusChange = async (info: updateParams) => {
    try {
      await postDemandTemplateStatus({
        id: info.id,
      });
      getDemandTemplateAll();
    } catch (err: unknown) {
      console.log(err);
    }
  };
  // 删除卡片
  const del = async (id: number) => {
    try {
      await deleteDemandTemplate({ id });
      getDemandTemplateAll();
    } catch (error: unknown) {
      console.log(error);
    }
  };
  onMounted(() => {
    getDemandTemplateAll();
  });

  const search = () => {
    getDemandTemplateAll();
  };
</script>

<style scoped lang="less">
  .index {
    .content {
      padding: 16px;
    }

    .operater {
      margin: 24px 0;
      display: flex;
      justify-content: space-between;
    }

    .model-title {
      background: rgba(242, 246, 252, 1);
      padding: 16px 24px;
      font-size: 16px;
    }

    .cards {
      padding: 16px 24px;
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>
